{extends 'base/site2.html'}
{block name="page_header"}{include file="common/header.html" inline}{/block}
{block name="page_nav"}{include file="common/slide-nav.html" inline}{/block}
{block name="page_styles"}
<link rel="stylesheet" type="text/css" href="/css/mediation/error/error.css" />
<style>
.error .clip .shadow {
	height:180px;
}
.error .clip:nth-of-type(2) .shadow {
	width:130px;
}
.error .clip:nth-of-type(1) .shadow,.error .clip:nth-of-type(3) .shadow {
	width:250px;
}
.error .digit {
	width:150px;
	height:150px;
	line-height:150px;
	font-size:120px;
	font-weight:bold;
}
.error h2 {
	font-size:32px;
}
.error .msg {
	top:-190px;
	left:30%;
	width:80px;
	height:80px;
	line-height:80px;
	font-size:32px;
}
.error span.triangle {
	top:70%;
	right:0%;
	border-left:20px solid #535353;
	border-top:15px solid transparent;
	border-bottom:15px solid transparent;
}
.error .container-error-404 {
	top:50%;
	margin-top:100px;
	position:relative;
	height:250px;
	padding-top:40px;
}
.error .container-error-404 .clip {
	display:inline-block;
	transform:skew(-45deg);
}
.error .clip .shadow {
	overflow:hidden;
}
.error .clip:nth-of-type(2) .shadow {
	overflow:hidden;
	position:relative;
	box-shadow:inset 20px 0px 20px -15px rgba(150,150,150,0.8),20px 0px 20px -15px rgba(150,150,150,0.8);
}
.error .clip:nth-of-type(3) .shadow:after,.error .clip:nth-of-type(1) .shadow:after {
	content:"";
	position:absolute;
	right:-8px;
	bottom:0px;
	z-index:9999;
	height:100%;
	width:10px;
	background:linear-gradient(90deg,transparent,rgba(173,173,173,0.8),transparent);
	border-radius:50%;
}
.error .clip:nth-of-type(3) .shadow:after {
	left:-8px;
}
.error .digit {
	position:relative;
	top:8%;
	color:white;
	background:#2397ff;
	border-radius:50%;
	display:inline-block;
	transform:skew(45deg);
}
.error .clip:nth-of-type(2) .digit {
	left:-10%;
}
.error .clip:nth-of-type(1) .digit {
	right:-20%;
}
.error .clip:nth-of-type(3) .digit {
	left:-20%;
}
.error h2 {
	font-size:24px;
	color:#A2A2A2;
	font-weight:bold;
	padding-bottom:20px;
}
.error .tohome {
	font-size:16px;
	color:#07B3F9;
}
.error .msg {
	position:relative;
	z-index:9999;
	display:block;
	background:#535353;
	color:#A2A2A2;
	border-radius:50%;
	font-style:italic;
}
.error .triangle {
	position:absolute;
	z-index:999;
	transform:rotate(45deg);
	content:"";
	width:0;
	height:0;
}
@media(max-width:767px) {
	.error .clip .shadow {
	height:100px;
}
.error .clip:nth-of-type(2) .shadow {
	width:80px;
}
.error .clip:nth-of-type(1) .shadow,.error .clip:nth-of-type(3) .shadow {
	width:100px;
}
.error .digit {
	width:80px;
	height:80px;
	line-height:80px;
	font-size:52px;
}
.error h2 {
	font-size:18px;
}
.error .msg {
	top:-110px;
	left:15%;
	width:40px;
	height:40px;
	line-height:40px;
	font-size:18px;
}
.error span.triangle {
	top:70%;
	right:-3%;
	border-left:10px solid #535353;
	border-top:8px solid transparent;
	border-bottom:8px solid transparent;
}
.error .container-error-404 {
	height:150px;
}
}
</style>
{/block}
{block name="page_scripts"}
<script type="text/javascript" src="/js/mediation/del/del.min.js" init="mediation/del/del"></script>
<script>

function randomNum() {
    return Math.floor(Math.random() * 9) + 1;
}

var loop1, loop2, loop3, time = 30,
    i = 0,
    number;
loop3 = setInterval(function() {
    if (i > 40) {
        clearInterval(loop3);
        document.querySelector('.thirdDigit').textContent = 4;
    } else {
        document.querySelector('.thirdDigit').textContent = randomNum();
        i++;
    }
}, time);
loop2 = setInterval(function() {
    if (i > 80) {
        clearInterval(loop2);
        document.querySelector('.secondDigit').textContent = 0;
    } else {
        document.querySelector('.secondDigit').textContent = randomNum();
        i++;
    }
}, time);
loop1 = setInterval(function() {
    if (i > 100) {
        clearInterval(loop1);
        document.querySelector('.firstDigit').textContent = 0;
    } else {
        document.querySelector('.firstDigit').textContent = randomNum();
        i++;
    }
}, time);
</script>
{/block}
{block name="page_section"}
    <div class="sessionPage bg-fff mr-t20" >
        <div class="error">
            <div class="container-floud">
                <div style="text-align: center">
                    <div class="container-error-404">
                        <div class="clip">
                            <div class="shadow">
                                <span class="digit thirdDigit"></span>
                            </div>
                        </div>
                        <div class="clip">
                            <div class="shadow">
                                <span class="digit secondDigit"></span>
                            </div>
                        </div>
                        <div class="clip">
                            <div class="shadow">
                                <span class="digit firstDigit"></span>
                            </div>
                        </div>
                        <div class="msg">OH!
                            <span class="triangle"></span>
                        </div>
                    </div>
                    <h2 class="h1">{if $title}{$title}{else}出错啦{/if}~<span>{if $msg}{$msg}！{/if}</span></h2>
                </div>
            </div>
        </div>
        <div class="page-errinner" style="display: flex;justify-content: center;">
            <a class="btn btn-default" href="/" style="margin-right: 50px;">首页</a>
            <a class="btn btn-default" href="javascript:history.back(-1)">返回上一页</a>
        </div>
    </div>
{/block}